<template>
  <div class="campaign-report">
    <el-card>
      <div slot="header">活动效果报表</div>
      <div v-loading="loading">
        <el-table
          :data="campaignData"
          border
          stripe
          :header-cell-style="{ background: '#f5f7fa' }"
          height="500px"
          style="width: 100%;">
          <el-table-column prop="campaign_name" label="活动名称" min-width="150"></el-table-column>
          <el-table-column prop="start_date" label="开始时间" width="120" align="center"></el-table-column>
          <el-table-column prop="end_date" label="结束时间" width="120" align="center"></el-table-column>
          <el-table-column prop="participants" label="参与人数" width="90" align="center">
            <template slot="header">
              <span>参与人数
                <el-tooltip placement="top">
                  <div slot="content" style="max-width: 360px; line-height: 1.5;">
                    <div><strong>定义：</strong>活动期间参与的去重用户数量</div>
                    <div><strong>计算：</strong>去重参与用户数（优先 union_id，退化 openid；由后端聚合）</div>
                    <div><strong>筛选：</strong>受时间范围 / 活动筛选限制</div>
                    <div><strong>示例：</strong>3 位用户多次参与 → 参与人数 = 3</div>
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="conversion_rate" label="完成率" min-width="110" align="center">
            <template slot="header">
              <span>完成率
                <el-tooltip placement="top">
                  <div slot="content" style="max-width: 420px; line-height: 1.5;">
                    <div><strong>定义：</strong>参与用户完成任务的比例</div>
                    <div><strong>计算：</strong>完成次数 ÷ 参与人数 × 100%</div>
                    <div><strong>来源：</strong>后端聚合计算（活动记录/奖励记录）</div>
                    <div><strong>筛选：</strong>受时间范围 / 活动筛选限制</div>
                    <div><strong>示例：</strong>完成 80 次，参与人数 200 → 完成率 = 40%</div>
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
            </template>
            <template slot-scope="scope">
              {{ scope.row.conversion_rate || 0 }}%
            </template>
          </el-table-column>
          <el-table-column prop="points_cost" label="积分成本" min-width="120" align="center">
            <template slot="header">
              <span>积分成本
                <el-tooltip placement="top">
                  <div slot="content" style="max-width: 380px; line-height: 1.5;">
                    <div><strong>定义：</strong>活动期间发放的积分总数</div>
                    <div><strong>计算：</strong>SUM(发放积分数)</div>
                    <div><strong>来源：</strong>后端聚合（奖励发放记录）</div>
                    <div><strong>示例：</strong>发放 100、200、50 → 积分成本 = 350</div>
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="effectiveness_score" label="参与热度" min-width="110" align="center">
            <template slot="header">
              <span>参与热度
                <el-tooltip placement="top">
                  <div slot="content" style="max-width: 420px; line-height: 1.5;">
                    <div><strong>定义：</strong>基于参与/奖励等行为的活动热度评分（0-100 分）</div>
                    <div><strong>计算：</strong>由后端评分模型计算（示例：奖励记录、参与次数、完成率综合）</div>
                    <div><strong>示例：</strong>80 分 → 高热度；40 分 → 中等；20 分 → 低</div>
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="roi" label="日均效果" min-width="110" align="center">
            <template slot="header">
              <span>日均效果
                <el-tooltip placement="top">
                  <div slot="content" style="max-width: 380px; line-height: 1.5;">
                    <div><strong>定义：</strong>活动的日均参与/奖励强度</div>
                    <div><strong>计算：</strong>奖励记录数 ÷ 活动天数</div>
                    <div><strong>来源：</strong>后端聚合（奖励记录 & 活动起止）</div>
                    <div><strong>示例：</strong>奖励 70 条，7 天 → 日均效果 = 10 条/天</div>
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
            </template>
            <template slot-scope="scope">
              {{ scope.row.roi || 0 }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { nfcReportsAPI } from '@/api/nfc'

export default {
  name: 'CampaignReport',
  props: {
    filters: { type: Object, required: true }
  },
  data() {
    return {
      loading: false,
      campaignData: []
    }
  },
  watch: {
    filters: { handler() { this.loadData() }, deep: true }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        this.loading = true
        const response = await nfcReportsAPI.getCampaignEffectiveness(this.filters)
        this.campaignData = response.data || []
      } catch (error) {
        console.error('加载活动数据失败：', error)
        this.$message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.campaign-report .el-table {
  width: 100% !important;
}
</style>